<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers with ArcGIS Server</title>
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    // 设置投影坐标系为EPSG:4490
    var projection = ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;

    // 设置更合适的分辨率和矩阵ID
    var resolutions = [];
    var matrixIds = [];
    for (var z = 0; z <= 18; ++z) {  // 层级范围设置为0到18
        resolutions[z] = size / Math.pow(2, z);  // 计算每个层级的分辨率
        matrixIds[z] = z;  // 设置矩阵ID
    }

    // 配置WMTS瓦片网格
    var wmtsTileGrid = new ol.tilegrid.WMTS({
        tileSize: [256, 256],
        extent: projectionExtent,
        origin: [112.50000545616945, 44.99999916058932], // 瓦片的原点
        resolutions: resolutions,  // 分辨率数组
        matrixIds: matrixIds  // 矩阵ID数组
    });

    // 设置WMTS图层
    var wmtsLayer = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: 'http://dxjc.efgd.net:8084/iserver/services/map-agscache-Layers5/wmts100',
            layer: 'Layers',  // 图层名称
            matrixSet: 'Custom_Layers',  // 矩阵集
            format: 'image/jpeg',  // 图层格式
            projection: projection,  // 投影坐标系
            tileGrid: wmtsTileGrid,  // 瓦片网格
            style: 'default'  // 图层样式
        })
    });

    // 初始化OpenLayers地图对象
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()  // 使用OSM作为底图
            }),
            wmtsLayer  // 添加WMTS图层
        ],
        view: new ol.View({
            center: [119.7495174865656, 33.08941210563982],
            projection: "EPSG:4326",
            zoom: 10,
            maxZoom: 19,
            minZoom: 2
        })
    });
</script>
</body>
</html>
